<template>
  <div>
    <div class="cell-text">
      <el-link
        type="primary"
        @click="handleClick(row)"
        v-if="row.$action == 'modify'"
      >
        {{ getCheckboxValues(row).join(" ") }}
      </el-link>
      <div v-else>{{ getCheckboxValues(row).join(" ") }}</div>
    </div>

    <!-- -->
    <el-dialog
      :title="label"
      :visible.sync="visible"
      v-if="visible"
      width="500px"
      :before-close="handleClose"
      center
      append-to-body
    >
      <div class="jydw-source-level__content" v-loading="loading">
        <slot>
          <!-- <el-checkbox :indeterminate="scope.row.$isIndeterminate" v-model="scope.row.$checkAll" @change="handleCheckAllChange(scope.row)">全选</el-checkbox> -->
          <!-- <el-checkbox-group
            v-model="editRow.$checked"
            @change="handleCheckedCitiesChange(editRow)"
          > -->
          <div>
            <el-checkbox
              key="country"
              label="country"
              :disabled="editRow.$checked.filter((i,k)=>i&&k!=0).length>0 || editRow.$checked[1]"
              v-model="editRow.$checked[0]"
              @change="(checked) => handleLevelChange(checked, 0)"
              >国家级</el-checkbox
            >
          </div>
          <div class="selectBox">
            <el-checkbox
              key="province"
              label="province"
              :disabled="(editRow.$checked.filter((i,k)=>i&&k!=1).length>0&&!editRow.$checked[0]) || editRow.$checked[2]"
              v-model="editRow.$checked[1]"
              @change="(checked) => handleLevelChange(checked, 1)"
              >自治区级</el-checkbox
            >
          </div>
          <div>
            <el-checkbox
              key="city"
              label="city"
              :disabled="(editRow.$checked.filter((i,k)=>i&&k!=1).length>0&&!editRow.$checked[1]) || editRow.$checked[3]"
              v-model="editRow.$checked[2]"
              @change="(checked) => handleLevelChange(checked, 2)"
              >盟市级</el-checkbox
            >
            <el-select
              v-model="cityId"
              @change="change($event, editRow, 'cityId', 'cityObjs')"
              placeholder="请选择盟市"
            >
              <el-option
                v-for="items in cityObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="cityOrgId"
              @change="change($event, editRow, 'cityOrgId', 'cityOrgObjs')"
              placeholder="选择同步单位"
            >
              <el-option
                v-for="items in cityOrgObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </div>
          <div>
            <el-checkbox
              key="county"
              label="county"
              :disabled="editRow.$checked.filter((i,k)=>i&&k!=3).length>0&&!editRow.$checked[2]"
              v-model="editRow.$checked[3]"
              >旗县级</el-checkbox
            >
            <el-select
              v-model="countyId"
              @change="change($event, editRow, 'countyId', 'countyObjs')"
              placeholder="请选择旗县"
            >
              <el-option
                v-for="items in countyObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="countyOrgId"
              @change="change($event, editRow, 'countyOrgId', 'countyOrgObjs')"
              placeholder="选择同步单位"
            >
              <el-option
                v-for="items in countyOrgObjs"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </div>
          <!-- </el-checkbox-group> -->
        </slot>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose(editRow)" :disabled="loading"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="handleConfirm(editRow)"
          :disabled="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { objectMerge } from "@/utils";
import columnData from "./data.json";
import columnMixin from "./mixin.js";

// let data ={
// "$action":"view",
// "$checkAll":false,
// "$checked":Array(0),
// "$isIndeterminate":false,
// "$sourceLevel":undefined,
// "$visible":false,
// "adminType":17,
// "areaCode":"150000000000",
// "areaName":"内蒙古自治区",
// "city":"",
// "cityOrgId":"",
// "cityOrgName":"",
// "country":"86",
// "county":"",
// "countyOrgId":"",
// "countyOrgName":"",
// "createdBy":"15622226661",
// "createdTime":1690302132000,
// "csAdminLevel":"Province",
// "id":"1133554831147925504",
// "job":"信息员",
// "menuId":"1000000010",
// "menuName":"救援队伍",
// "menuPermission":"1000000010::",
// "name":"王1",
// "orgId":"dp-d0435cf4f867411099ae69f9a97026a2",
// "orgName":"救援队伍1",
// "pageType":"",
// "phone":"13433333334",
// "province":"",
// "sourceLevel":undefined,
// "sourceType":"消防救援队",
// "status":1,
// "superiorOrg":"救援队伍",
// "updatedBy":"15622226661",
// "workUnit":"救援队伍1",
// }

const checkOptions = ["country", "province", "city", "county"];
export default {
  mixins: [columnMixin],
  props: {
    label: {
      type: [String],
      default: "",
    },
    showKey: {
      type: [String],
      default: "",
    },
    field: {
      type: [String],
      default: "",
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    content: {
      type: Object,
      default() {
        return {
          controller: null,
          props: {},
          columns: [],
        };
      },
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      columnData,
      loading: false,
      cityObjs: [],
      cityOrgObjs: [],
      countyObjs: [],
      countyOrgObjs: [],
      cityId: "",
      cityOrgId: "",
      countyId: "",
      countyOrgId: "",
      visible: false,
      editRow: {},
    };
  },
  components: {},
  watch: {
    // "cityId": {
    //   handler(val) {
    //     debugger
    //     this.getOrgList(val, "cityOrgObjs", "cityId"); //  查询市单位列表
    //     this.getList(val, "countyObjs", "countyId"); // 查询县列表
    //   },
    // },
    // "countyId": {
    //   handler(val) {
    //     this.getOrgList(val, "countyOrgObjs"); // 查询县城单位列表
    //   },
    // },
  },
  mounted() {
    console.log("content", this.content);
  },
  computed: {
    allowChecked() {
      return function (dataRow) {
        let isaleary =  (dataRow.filter(i=>i).length) > 0

        return 1;
      };
    },
  },
  methods: {
    getCheckboxValues: (row) => {
      // 选择的checkbox值变成 text
      let values = [];
      if (row && row.sourceLevel?.country) values.push("国家级");
      if (row && row.sourceLevel?.province) values.push("自治区级");
      if (row && row.sourceLevel?.city) values.push("盟市级");
      if (row && row.sourceLevel?.county) values.push("旗县级");
      if (values.length == 0) values.push("请选择级别");
      return values;
    },
    getList(parId, obj, key, once) {
      // once 是否第一次加载
      // 获取市列表----------请求参数parId、 保存请求返回的list列表、 默认选择的select保存起来
      let payload = { body: { parId: parId || "150000000000" } };
      if (key == "countyId" && !parId) {
        // 如果直接选县列表，不先选市，则 默认传 150000000， 并且加level =1
        payload = { body: { parId: "150000000000", level: 1 } };
      }

      this.$api.CommonController.list(payload, (res) => {
        if (res.code == 0) {
          this[obj] = res.data;
          if (!once) this[key] = res?.data?.[0]["id"];
        }
      });
    },
    getOrgList(parId, obj) {
      if (parId) {
        // 获取单位列表
        this.$api.OrgController.level({ body: { parId } }, (res) => {
          if (res.code == 0) {
            this[obj] = res.data;
          }
        });
      }
    },
    handleClick(row) {
      row.$sourceLevel = row.sourceLevel;
      row.$checked = ["country", "province", "city", "county"].map(
        (item) => !!row.sourceLevel[item]
      );
      this.visible = true;
      this.editRow = row;
      this.cityId = row.sourceLevel.city || "";
      this.countyId = row.sourceLevel.county || "";
      this.cityOrgId = row.sourceLevel.cityOrgId || "";
      this.countyOrgId = row.sourceLevel.countyOrgId || "";
      this.handleLevelChange(true, 2);
      if (this.coutyId) {
        this.getOrgList(this.countyId, "countyOrgObjs");
      }
      if (this.cityId) {
        this.getOrgList(this.cityId, "cityOrgObjs");
      }
    },
    handleLevelChange(val, level) {
      // val  勾选状态  level 层级 0-3
      if (val) {
        if (level == 2) {
          this.getList("", "cityObjs", "cityId", true); // 查询城市列表
          this.getList(this.cityId, "countyObjs", "countyId", true); // 查询县列表
        }
      } else {
        if (level == 2) {
          this.getList("", "countyObjs", "countyId"); // 查询城市列表
        }
      }
    },
    handleCheckAllChange(row) {
      console.log("handleCheckAllChange", row.$checkAll);
      row.$checked = row.$checkAll ? checkOptions : [];
      row.$isIndeterminate = false;
    },
    handleCheckedCitiesChange(row) {
      console.log(this.editRow, row);

      // let checkedCount = row.$checked.length;
      // row.$checkAll = checkedCount === checkOptions.length;
      // row.$isIndeterminate =
      //   checkedCount > 0 && checkedCount < checkOptions.length;
      // console.log(" row.$isIndeterminate", row.$isIndeterminate);
    },
    change(val, row, key, obj) {
      // 当前改变的值、当前编辑的行、当前row中的key、当前下拉框的list数组值
      // 选择下拉
      if (key == "cityId") {
        this[key] = val;
        this.countyId = "";
        this.getOrgList(val, "cityOrgObjs");
        this.getList(val, "countyObjs");
      }
      if (key == "countyId") {
        this.getOrgList(val, "countyOrgObjs");
      }
    },
    handleConfirm(row) {
      row = this.editRow;
      console.log("checkedCities", row.$checked);
      console.log(row, this.editRow);
      row.sourceLevel = {};
      if (row.$checked[0]) {
        row.sourceLevel.country = "86";
      }
      if (row.$checked[1]) {
        row.sourceLevel.province = "150000000000";
      }
      if (row.$checked[2]) {
        row.sourceLevel.city = this.cityId;
        row.sourceLevel.cityOrgId = this.cityOrgId;
      }
      if (row.$checked[3]) {
        row.sourceLevel.county = this.countyId;
        row.sourceLevel.countyOrgId = this.countyOrgId;
      }
      this.visible = false;
      console.log("this.editRow", this.editRow);
    },
    handleClose(row) {
      row.sourceLevel = row.$sourceLevel;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.jydw-source-level {
  &__content {
    .el-input__inner {
      width: 160px;
    }
  }
}
.el-select {
  margin-left: 6px;
}
.el-checkbox-group {
  div {
    margin: 3px 0;
  }
}
.tx-list-table .el-table .el-tooltip .cell-text {
  margin-bottom: 12px;
}
</style>
